<template>
  <div>
    <div class="wrap">

      <!-- 上下 -->

      <SkyCardPanel title="上下">
        <div slot="header-right">
          <!-- <SkyButton type="primary">操作</SkyButton> -->
        </div>
        <div slot="main">

          <SkySteps :active.sync="active1" direction="vertical">
            <SkyStepItem title="提交完成" @click.native="active1=1" description="提交描述有点多有点多"> </SkyStepItem>
            <SkyStepItem title="正在处理" @click.native="active1=2" description="处理描述有点多有点多不得不换行"></SkyStepItem>
            <SkyStepItem title="审核通过" @click.native="active1=3" description="内容已通过已通过已经通过了"></SkyStepItem>
          </SkySteps>

          <div style="height:120px"></div>

          <SkySteps :active.sync="active1" onlyicon direction="vertical">
            <SkyStepItem title="提交完成">
              <div slot="icon">
                <i class="el-icon-service" />
              </div>
            </SkyStepItem>
            <SkyStepItem title="正在处理">
              <div slot="icon">
                <i class="el-icon-service" />
              </div>
            </SkyStepItem>
            <SkyStepItem title="审核通过">
              <div slot="icon">
                <i class="el-icon-service" />
              </div>
            </SkyStepItem>
          </SkySteps>

        </div>
      </SkyCardPanel>

      <SkyHiddenPanel title="代码">
        <div class="prewrap" v-highlight>
          <!-- 使用指令 -->
          <pre>
          <code class="html">
    
          &lt;SkySteps :active.sync="active1" direction="vertical"&gt;
            &lt;SkyStepItem title="提交完成" @click.native="active1=1" description="提交描述有点多有点多"&gt; &lt;/SkyStepItem&gt;
            &lt;SkyStepItem title="正在处理" @click.native="active1=2" description="处理描述有点多有点多不得不换行"&gt;&lt;/SkyStepItem&gt;
            &lt;SkyStepItem title="审核通过" @click.native="active1=3" description="内容已通过已通过已经通过了"&gt;&lt;/SkyStepItem&gt;
          &lt;/SkySteps&gt;


          &lt;SkySteps :active.sync="active1" onlyicon direction="vertical"&gt;
            &lt;SkyStepItem title="提交完成"&gt;
              &lt;div slot="icon"&gt;
                &lt;i class="el-icon-service" /&gt;
              &lt;/div&gt;
            &lt;/SkyStepItem&gt;
            &lt;SkyStepItem title="正在处理"&gt;
              &lt;div slot="icon"&gt;
                &lt;i class="el-icon-service" /&gt;
              &lt;/div&gt;
            &lt;/SkyStepItem&gt;
            &lt;SkyStepItem title="审核通过"&gt;
              &lt;div slot="icon"&gt;
                &lt;i class="el-icon-service" /&gt;
              &lt;/div&gt;
            &lt;/SkyStepItem&gt;
          &lt;/SkySteps&gt;

          </code>
      </pre>
        </div>

        <div class="prewrap" v-highlight>
          <!-- 使用指令 -->
          <pre>
          <code class="javascript">
              export default {
                data () {
                  return {
                    active1: 1,
                  }
                }
              }
          </code>
      </pre>
        </div>
      </SkyHiddenPanel>

      <!-- 左右 -->

      <SkyCardPanel title="左右">
        <div slot="header-right">
          <!-- <SkyButton type="primary">操作</SkyButton> -->
        </div>
        <div slot="main">

          <SkySteps :active.sync="active2">
            <SkyStepItem title="提交完成" @click.native="active2=1" description="提交描述有点多有点多"></SkyStepItem>
            <SkyStepItem title="正在处理" @click.native="active2=2" description="处理描述有点多有点多不得不换行"></SkyStepItem>
            <SkyStepItem title="审核通过" @click.native="active2=3" description="内容已通过已通过已经通过了"></SkyStepItem>
          </SkySteps>

          <div style="height:150px"></div>

          <SkySteps :active.sync="active2" onlyicon>
            <SkyStepItem title="提交完成">
              <div slot="icon">
                <i class="el-icon-service" />
              </div>
            </SkyStepItem>
            <SkyStepItem title="正在处理">
              <div slot="icon">
                <i class="el-icon-service" />
              </div>
            </SkyStepItem>
            <SkyStepItem title="审核通过">
              <div slot="icon">
                <i class="el-icon-service" />
              </div>
            </SkyStepItem>
          </SkySteps>

          <div style="height:120px"></div>

          <SkySteps :active.sync="active2" onlyicon>
            <SkyStepItem title="提交完成" description="提交描述有点多有点多">
              <div slot="icon">
                <i class="el-icon-service" />
              </div>
            </SkyStepItem>
            <SkyStepItem title="正在处理" description="处理描述有点多有点多不得不换行">
              <div slot="icon">
                <i class="el-icon-service" />
              </div>
            </SkyStepItem>
            <SkyStepItem title="审核通过" description="内容已通过已通过已经通过了">
              <div slot="icon">
                <i class="el-icon-service" />
              </div>
            </SkyStepItem>
          </SkySteps>

        </div>
      </SkyCardPanel>

      <SkyHiddenPanel title="代码">
        <div class="prewrap" v-highlight>
          <!-- 使用指令 -->
          <pre>
          <code class="html">
    
          &lt;SkySteps :active.sync="active2"&gt;
            &lt;SkyStepItem title="提交完成" @click.native="active2=1" description="提交描述有点多有点多"&gt;&lt;/SkyStepItem&gt;
            &lt;SkyStepItem title="正在处理" @click.native="active2=2" description="处理描述有点多有点多不得不换行"&gt;&lt;/SkyStepItem&gt;
            &lt;SkyStepItem title="审核通过" @click.native="active2=3" description="内容已通过已通过已经通过了"&gt;&lt;/SkyStepItem&gt;
          &lt;/SkySteps&gt;

          &lt;SkySteps :active.sync="active2" onlyicon&gt;
            &lt;SkyStepItem title="提交完成"&gt;
              &lt;div slot="icon"&gt;
                &lt;i class="el-icon-service" /&gt;
              &lt;/div&gt;
            &lt;/SkyStepItem&gt;
            &lt;SkyStepItem title="正在处理"&gt;
              &lt;div slot="icon"&gt;
                &lt;i class="el-icon-service" /&gt;
              &lt;/div&gt;
            &lt;/SkyStepItem&gt;
            &lt;SkyStepItem title="审核通过"&gt;
              &lt;div slot="icon"&gt;
                &lt;i class="el-icon-service" /&gt;
              &lt;/div&gt;
            &lt;/SkyStepItem&gt;
          &lt;/SkySteps&gt;

          &lt;SkySteps :active.sync="active2" onlyicon&gt;
            &lt;SkyStepItem title="提交完成" description="提交描述有点多有点多"&gt;
              &lt;div slot="icon"&gt;
                &lt;i class="el-icon-service" /&gt;
              &lt;/div&gt;
            &lt;/SkyStepItem&gt;
            &lt;SkyStepItem title="正在处理" description="处理描述有点多有点多不得不换行"&gt;
              &lt;div slot="icon"&gt;
                &lt;i class="el-icon-service" /&gt;
              &lt;/div&gt;
            &lt;/SkyStepItem&gt;
            &lt;SkyStepItem title="审核通过" description="内容已通过已通过已经通过了"&gt;
              &lt;div slot="icon"&gt;
                &lt;i class="el-icon-service" /&gt;
              &lt;/div&gt;
            &lt;/SkyStepItem&gt;
          &lt;/SkySteps&gt;

          </code>
      </pre>
        </div>

        <div class="prewrap" v-highlight>
          <!-- 使用指令 -->
          <pre>
          <code class="javascript">
              export default {
                data () {
                  return {
                    active2: 1,
                  }
                }
              }
          </code>
      </pre>
        </div>
      </SkyHiddenPanel>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active1: 1,
      active2: 1,
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  & /deep/.card-main {
    padding-bottom: 80px;
  }
}
</style>